export default {
	data() {
		return {
			//数据
			access: '', //访问总量
			//今日访问量
			traffic: '',
			//月访问量的参数
			year: "2018",
			yearList: [], //年
			BrokenlineChart: {},
			//网站访问量
			Brokenlineoption: {
				title: {
					subtext: '月访问量',
					bottom: 0,
					left: 'center',
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985'
						}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: []
				},
				grid: {
					top: '5%',
					left: '0',
					right: '4%',
					bottom: '7%',
					containLabel: true
				},
				yAxis: {
					type: 'value',
					boundaryGap: false,
				},
				series: [{
					name: '月访问量',
					data: [],
					type: 'line',
					lineStyle: {
						normal: {
							color: '#FFC501',
							width: 2,
							shadowColor: 'rgba(255,218,151,0.3)',
							shadowBlur: 10,
							shadowOffsetY: 15

						}
					},
					itemStyle: {
						normal: {
							borderWidth: 1,
							color: '#FFFF00'
						}
					},
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 0, 1, [{
										offset: 0,
										color: '#FFDA97'
									},
									{
										offset: 0.2,
										color: '#FFDA97'
									},
									{
										offset: 1,
										color: '#F6F6F6'
									}
								]
							)
						},
					}
				}]
			},
		}
	},
	created() { //调用方法
		this.year = new Date().getFullYear();
	  this.accessTotal(); //访问总量
		this.trafficToday(); //今日访问量
		this.StatisticsChart(); //月访问量
		this.initYearList(); //初始化年列表
	},
	mounted() {
		//网站访问量
		this.BrokenlineChart = echarts.init(document.getElementById('Brokenline'));
	},
	methods: { //写函数方法
		/*初始化年列表*/
		initYearList: function() {
			let year = new Date().getFullYear();
			let yearList = [];
			for (let i = 4;i > 0;i--) {
        yearList.push(year - i);
      }
      yearList.push(year);
      this.yearList = yearList;
		  /*let that = this;
			that.$post(
					that.urls.getAllYearNum
				)
				.then(function(res) {
					if (res.success) {
						that.yearList = res.data;
					}
				})*/
		},
		/*访问总量*/
		accessTotal: function() {
			let that = this;
			that.$post(
					that.urls.getTotalAccessRecordCount
				)
				.then(function(res) {
					if (res.success) {
						that.access = res.data;
						console.log("访问总量:" + res.data)
					} else {
						layer.alert(res.message);
					}
				})
				.catch(function(err) {
					if (err.response) {
						console.log(err.response)
						//控制台打印错误返回的内容
						layer.msg('失败！', {
							time: 3000, //3s后自动关闭
						});
					}
				})
		},
		//今日访问量
		trafficToday: function() {
			let that = this;
			that.$post(
					that.urls.getCurrentAccessRecordCount
				)
				.then(function(res) {
					if (res.success) {
						that.traffic = res.data;
						// console.log("今日访问量:" + res.data)
					} else {
						layer.alert(res.message);
					}
				})
				.catch(function(err) {
					if (err.response) {
						console.log(err.response)
						//控制台打印错误返回的内容
						layer.msg('失败！', {
							time: 3000, //3s后自动关闭
						});
					}
				})
		},
		//月访问量
		StatisticsChart: function() {
			var that = this;
			that.$post(
					that.urls.getStatisticsChart, {
						year: that.year,
					}
				)
				.then(function(res) {
					if (res.success) {
						// console.log("月访问量:" + res)
						var data=[100,10,100,240,340,50,602,40,305,40,50,20]
						/*that.Brokenlineoption.series[0].data = res.data.count;*/
						that.Brokenlineoption.series[0].data =data;
						that.Brokenlineoption.xAxis.data = res.data.date;
						that.BrokenlineChart.setOption(that.Brokenlineoption);
						// console.log("月访问量Brokenlineoption:" + that.Brokenlineoption)

					} else {
						layer.alert(res.message);
					}
				})
				.catch(function(err) {
					if (err.response) {
						console.log(err.response)
						//控制台打印错误返回的内容
						layer.msg('失败！', {
							time: 3000, //3s后自动关闭
						});
					}
				})
		},
	}
}
